import React, { FC } from "react"
import { alpha, styled } from "@mui/material/styles"
import { Box, Stack, AppBar, Toolbar, IconButton, Button } from "@mui/material"
import Iconify from "../../components/Iconify"
import Searchbar from "./Searchbar"
import AccountPopover from "./AccountPopover"
import LanguagePopover from "./LanguagePopover"
import NotificationsPopover from "./NotificationsPopover"
import NavSectionHorizontal from "../../components/TNavSectionHorizontal"
import NavConfig from "./NavConfig"
import useAuth from "../../hooks/useAuth"
import { useTranslation } from "react-i18next"
import { Link as RouterLink } from "react-router-dom"

const APPBAR_MOBILE = 64

const RootStyle = styled(AppBar)(({ theme }) => ({
  boxShadow: "none",
  backdropFilter: "blur(6px)",
  WebkitBackdropFilter: "blur(6px)", // Fix on Mobile
  backgroundColor: alpha(theme.palette.background.default, 0.72),
}))

const ToolbarStyle = styled(Toolbar)(({ theme }) => ({
  minHeight: APPBAR_MOBILE,
  width: "100%",
  maxWidth: theme.breakpoints.values.xl,
  margin: "0 auto",
  paddingLeft: `${theme.spacing(2)} !important`,
}))

interface IDashboardNavbar {
  onOpenSidebar: (params: any) => any
}

const DashboardNavbar: FC<IDashboardNavbar> = ({ onOpenSidebar }) => {
  const isAuthed = useAuth()
  const { t } = useTranslation()

  return (
    <RootStyle>
      <ToolbarStyle>
        <Box component="img" alt="logo" src="/static/logo.png" sx={{ height: 40 }} />
        <Box component="img" alt="logo-text" src="/static/logo-text.png" sx={{ height: 20, px: 2, display: { xs: "none", sm: "block" } }} />
        <IconButton onClick={onOpenSidebar} sx={{ mr: 1, color: "text.primary", display: { xs: "inline-flex", lg: "none" } }}>
          <Iconify icon="eva:menu-2-fill" width={20} height={20} />
        </IconButton>

        <NavSectionHorizontal navConfig={NavConfig} />
        <Searchbar />
        <Box sx={{ flexGrow: 1 }} />

        <Stack direction="row" alignItems="center" spacing={{ xs: 0.5, sm: 1.5 }}>
          <LanguagePopover />
          {isAuthed ? (
            <>
              <NotificationsPopover />
              <AccountPopover />
            </>
          ) : (
            <>
              <Button variant="contained" color={"inherit"} component={RouterLink} to="/register">
                {t("common.register")}
              </Button>
              <Button variant="contained" component={RouterLink} to="/login">
                {t("common.login")}
              </Button>
            </>
          )}
        </Stack>
      </ToolbarStyle>
    </RootStyle>
  )
}

export default DashboardNavbar
